import  React,{useState} from 'react'

interface Props {
    userName:string;
    onNameUpdated: (newName:string) => void
}
const NameEditComponent :React.FC<Props> = (props) => {
    const [editingname,setEditingName] = useState("")
    const onChange = (e:React.ChangeEvent<HTMLInputElement>) => {
        setEditingName(e.target.value)
    }
    const onNameSubmit = () => {
        props.onNameUpdated(editingname)
    }
    return (
        <>
        {/* vscode 用ts写出来的 */}
        {props.userName}
        <input value = {editingname} 
            onChange = {onChange}/>
        <button onClick={onNameSubmit}>change</button>
        </>
    )
}
export default NameEditComponent